<!--
 * @FileDescription: 火炬设施内容
 * @Author: 祝小文
 * @Date: 2022-10-23 16:35
-->
<script setup lang="ts">
import { emitter } from '@/composables'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import { Search } from '@element-plus/icons-vue'
import hj_icon from '@/assets/image/mapIcon/hj-icon.png'
import SecondaryConfirm from '@/components/SecondaryConfirm/index.vue'
import { featureClick, delMapFactorInfo, flyToLxOrCjid } from '@/utils/common/index'
import {
  queryZdZdmcInfo,
  querySearchInfo,
  insertOrUpdateHjssxx,
  insertOrUpdateHjxx,
} from '@/service/api'

const chemicalStore = useChemicalStore()
const torchFacilities = chemicalStore.productionStorage.torchFacilities

const emit = defineEmits(['getCjInfo'])

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//字典
//查询火炬类型
queryZdZdmcInfo({ key: 'hjlx' }).then((res: any) => {
  torchFacilities.dictionaries.hjlx = res
})
//查询火炬形式
queryZdZdmcInfo({ key: 'hjxs' }).then((res: any) => {
  torchFacilities.dictionaries.hjxs = res
})

const input = ref('')
const torchFacilitiesList: any = ref([])

//搜索功能(300毫秒防抖)
const inputSearch = _.debounce((val: any) => {
  const params = {
    menuCode: 'hj',
    key: val,
    qyid: qyId.value,
  }
  querySearchInfo(params).then((res: any) => {
    torchFacilitiesList.value = res
  })
}, 300)

//火炬设施/火炬 删除数据/删除地图要素 确认
const secondaryConfirmSave = (type: any, typeCode: any) => {
  const item: any = chemicalStore.secondaryConfirmInfo.data

  //删除地图要素数据
  if (type === 'delMapData') {
    if (typeCode === 'hjss') {
      delMapFactorInfo(item, 'scrollWall')
    } else if (typeCode === 'hj') {
      delMapFactorInfo(item, 'overlay')
    }
  }
  //删除数据
  else if (type === 'delData') {
    if (typeCode === 'hjss') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateHjssxx(params)
        .then((res: any) => {
          emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

          //删除地图要素
          window.GScrollWall.removeByName(item.id)
          window.GOverlay.removeByPatName(item.id)

          ElMessage.success('火炬设施删除成功')
          loadTorchFacilitiesData()
        })
        .catch((err: any) => {
          ElMessage.error('火炬设施删除失败')
        })
    } else if (typeCode === 'hj') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateHjxx(params)
        .then((res: any) => {
          //删除地图要素
          window.GOverlay.removeByName(item.id)

          ElMessage.success('火炬删除成功')
          loadTorchFacilitiesData()
        })
        .catch((err: any) => {
          ElMessage.error('火炬删除失败')
        })
    }
  }
}

/** ---------- 火炬设施相关方法 Start ---------- */
//加载火炬设施数据
const loadTorchFacilitiesData = () => {
  const params = {
    menuCode: 'hj',
    qyid: qyId.value,
  }
  querySearchInfo(params).then((res: any) => {
    torchFacilitiesList.value = res
  })
}
loadTorchFacilitiesData()

//新增火炬设施
const addTorchFacilitiesClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: null, fid: null, lx: 'add' })
  torchFacilities.addTorchFacilitiesShow = true
}
//删除火炬设施
const delTorchFacilitiesClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除火炬设施以及该火炬设施下火炬信息',
    type: 'delData',
    typeCode: 'hjss',
    data: item,
  }
}
//修改火炬设施
const updateTorchFacilitiesClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: item.id, fid: null, lx: 'edit' })
  torchFacilities.addTorchFacilitiesShow = true
}

//火炬设施上图
const addMapTorchFacilitiesClick = (item: any) => {
  featureClick({
    id: item.id,
    parentName: item.id,
    MapFactorType: 'scrollWall',
    MapFactorName: '火炬区',
    bzlx: '12',
    text: item.mc,
    attribute: item,
  })
}
//火炬设施地图要素删除
const delMapTorchFacilitiesClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除该火炬设施地图要素',
    type: 'delMapData',
    typeCode: 'hjss',
    data: item,
  }
}

//火炬设施选中事件
const torchFacilitiesActiveIndex = ref(0)
const activeTorchFacilitiesClick = (item: any) => {
  flyToLxOrCjid('scrollWall', item.id)
  torchFacilitiesActiveIndex.value = item.id
  torchActiveIndex.value = 0
}
/** ---------- 火炬设施相关方法 End ---------- */

/** ---------- 火炬相关方法 Start ---------- */
//新增火炬
const addTorchClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  torchFacilities.addTorchShow = true
  emit('getCjInfo', { cjId: null, fid: item.id, lx: 'add' })
}
//删除火炬
const delTorchClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除火炬',
    type: 'delData',
    typeCode: 'hj',
    data: item,
  }
}
//修改火炬
const updateTankClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: item.id, fid: item.fid, lx: 'edit' })
  torchFacilities.addTorchShow = true
}

//火炬上图
const addMapTorchClick = (item: any) => {
  featureClick({
    id: item.id,
    parentName: item.fid,
    MapFactorType: 'overlay',
    MapFactorName: '火炬',
    bzlx: '13',
    text: item.mc,
    mapIconUrl: hj_icon,
    parentMenuId: item.parentId,
    attribute: item,
  })
}
//火炬地图要素删除
const delMapTorchClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除该火炬地图要素',
    type: 'delMapData',
    typeCode: 'hj',
    data: item,
  }
}

//火炬设施选中事件
const torchActiveIndex = ref(0)
const activeTorchClick = (item: any, hjssItem) => {
  flyToLxOrCjid('overlay', item.id)
  torchActiveIndex.value = item.id
  torchFacilitiesActiveIndex.value = hjssItem.id
}
/** ---------- 火炬相关方法 End ---------- */

/** 监听是否需要刷新数据 */
emitter.on('hj_refreshData', () => {
  //如果输入框中有值
  if (input.value) {
    inputSearch(input.value)
    return
  }
  loadTorchFacilitiesData()
})

/** 离开时销毁改事件 */
onUnmounted(() => {
  emitter.off('hj_refreshData')
})
</script>

<template>
  <div class="torchFacilities-container">
    <el-input
      v-model.trim="input"
      placeholder="请输入编号或名称"
      size="large"
      :suffix-icon="Search"
      class="card-search card-bck-color"
      @input="inputSearch"
    />

    <div class="torchFacilities-main">
      <div
        v-for="(hjssItem, hjssIndex) in torchFacilitiesList"
        :key="hjssIndex"
        class="torchFacilities-card"
        :class="{ 'torchFacilities-active': hjssItem.id === torchFacilitiesActiveIndex }"
        @click="activeTorchFacilitiesClick(hjssItem)"
      >
        <div class="torchFacilities-card-top">
          <div style="display: flex; align-items: center">
            <i></i>
            <span class="single-line-text-exceeds" style="width: 260px" :title="hjssItem.mc">{{
              hjssItem.mc
            }}</span>
          </div>
          <div class="card-operation-btn">
            <!-- 火炬设施数据修改 -->
            <i title="编辑表单" @click.stop="updateTorchFacilitiesClick(hjssItem)"></i>

            <!-- 火炬设施地图要素上图 -->
            <i
              v-if="hjssItem.sfbh === 0"
              title="标注"
              class="map-add"
              @click.stop="addMapTorchFacilitiesClick(hjssItem)"
            ></i>
            <!-- 火炬设施地图要素删除 -->
            <i
              v-else
              title="删除标注"
              class="map-delete"
              @click.stop="delMapTorchFacilitiesClick(hjssItem)"
            ></i>

            <!-- 火炬设施数据删除 -->
            <i title="删除数据" @click.stop="delTorchFacilitiesClick(hjssItem)"></i>
          </div>
        </div>

        <div class="torchFacilities-card-content">
          <div
            v-for="(hjItem, hjIndex) in hjssItem.searchInfoChild"
            :key="hjIndex"
            class="torchFacilities-card-item"
            :class="{ 'torch-active': hjItem.id === torchActiveIndex }"
            @click.stop="activeTorchClick(hjItem, hjssItem)"
          >
            <div class="single-line-text-exceeds" style="width: 260px" :title="hjItem.mc">
              {{ hjItem.mc }}
            </div>
            <div class="card-operation-btn">
              <!-- 火炬数据修改 -->
              <i title="编辑表单" @click.stop="updateTankClick(hjItem)"></i>

              <!-- 火炬地图要素上图 -->
              <i
                v-if="hjItem.sfbh === 0"
                title="标注"
                class="map-add"
                @click.stop="addMapTorchClick(hjItem)"
              ></i>
              <!-- 火炬地图要素删除 -->
              <i
                v-else
                title="删除标注"
                class="map-delete"
                @click.stop="delMapTorchClick(hjItem)"
              ></i>

              <!-- 火炬数据删除 -->
              <i title="删除数据" @click.stop="delTorchClick(hjItem)"></i>
            </div>
          </div>
        </div>
        <div class="torchFacilities-card-bottom" @click.stop="addTorchClick(hjssItem)">
          <i></i>
          <span>新增火炬</span>
        </div>
      </div>
    </div>

    <div class="card-footer" @click="addTorchFacilitiesClick">
      <i></i>
      <span>新增火炬设施</span>
    </div>
  </div>
  <!-- 删除数据二次确认弹窗 -->
  <SecondaryConfirm @secondaryConfirmSave="secondaryConfirmSave" />
</template>

<style lang="less" scoped>
.torchFacilities-active {
  border: 1px solid #02979b;
}

.torch-active {
  border: 1px solid #02979b !important;
  background: rgba(2, 151, 155, 0.4) !important;
}

.torchFacilities-container {
  height: 100%;
  .torchFacilities-main {
    height: calc(100% - 100px);
    overflow: auto;
    .torchFacilities-card {
      max-height: 190px;
      margin-bottom: 16px;
      padding: 15px;
      background-color: rgba(1, 7, 17, 0.6);
      border-radius: 8px;
      cursor: pointer;
      .torchFacilities-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 15px;
        & > div:nth-child(1) {
          i {
            display: inline-block;
            width: 28px;
            height: 28px;
            margin-top: -5px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url(@/assets/image/ProductionStorage/hj-icon.png);
            vertical-align: middle;
          }
        }
      }
      .torchFacilities-card-content {
        max-height: 100px;
        overflow: auto;
        margin-bottom: 8px;
        .torchFacilities-card-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
          line-height: 36px;
          margin-bottom: 12px;
          padding-left: 6px;
          padding-right: 14px;
          background: rgba(109, 109, 109, 0.2);
          border: 1px solid #6d6d6d;
          border-radius: 4px;
          cursor: pointer;
        }
      }

      .torchFacilities-card-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        background: rgba(109, 109, 109, 0.2);
        border: 1.5px dashed #6d6d6d;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 16px;
        cursor: pointer;
        i {
          display: inline-block;
          width: 28px;
          height: 28px;
          margin-right: 8px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url(@/assets/image/common/plus-icon.png);
        }
      }
    }
    .torchFacilities-card:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
